<template>
  <div class="BackMain">
    <div class="BackMainFather" :class="NavStyle()">
      <div class="LeftNav">
        <h4>测试0.1</h4>


        <div>
          <div class="menuLeft"><img src="../../public/img/试卷管理.png"><router-link :to="{name:'AdminBlog'}" style="color: white">博客</router-link></div>
          <div v-if="judeHideMenu('Blog')" class="menuChild">
            <p @click="JumpH('AdminBlog')" :style="listMenu('AdminBlog')">文章管理</p>
          </div>
        </div>

        </div>
      <div class="RightContent">
        <div class="menuHead">
          <h4>后台管理</h4>
          <div class="sidebarDiv"><img src="../../public/img/菜单.png" class="sidebar" @click="NavShow()"></div>
        </div>
        <div class="where">
          <span v-for="(item,index) in matchedArr()"> {{item.title}} <b v-if="index != matchedArr().length-1">/</b> </span>
        </div>
        <keep-alive>
        <router-view/>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
export default {
name: "BackStage",
    data(){
     return {
          NavJude:false
     }
    },
  methods:{
     matchedArr(){
        var temp = [];
        console.log(this.$route.matched)
       for (var i=0; i<this.$route.matched.length;i++){
            temp[i] = {'title':this.$route.matched[i].meta.title,'path':this.$route.matched[i].path}
       }
       return temp;
     },
       NavShow(){
         this.NavJude = !this.NavJude
       },
       NavStyle(){
          return  this.NavJude ? {'HideLeft':true}:{'HideRight':true}
       },
       routeJude(){
         return this.NavJude;
       },
    judeHideMenu(item){
        if(this.NavJude == false){
          return false;
        }
        return this.$route.path.indexOf(item)!= -1;
    },
    JumpH(item){
         return this.$router.push({'name':item})
    },
    listMenu(item){
         return this.$route.name == item ? {'background-color':'#1d8ee6','color':'white'} : {'background-color':'#000c17'};
    }
  }
}
</script>

<style lang="scss" scoped >
$main:100%;
   .BackMain{
     margin-bottom: 200px;
     width:$main;
     overflow: hidden;
   }
   .BackMainFather{
     transition: 0.5s;
     width: 120%;
     display: flex;
     justify-content: space-between;
     .LeftNav{
       h4{
         color: white;
         padding-left: 20px;
         padding-top: 10px;
         padding-bottom: 10px;
       }
        width: $main - 80%;
       background-color: #001529;
     }
     .RightContent{
       width: $main;
     }
   }
   .LeftNav{
     .menuLeft{
       padding-left: 20px;
       font-size: 14px;
       transition: 0.5s;
       text-align: center;
       padding-top: 15px;
       padding-bottom: 15px;
       display: flex;
       align-items: center;
       img{
         width: 7%;
        margin-right: 4px;
       }
     }
   }
   .sidebar{
     outline: none;
     padding:5px;
     width: 20px;


   }
   .HideLeft{
   margin-left:0;
   }
   .HideRight{
   margin-left:-20%;
   }
   .menuChild{
     color: #9fa3a8;
     >p{
       cursor:pointer;
       font-size: 14px;
       line-height: 50px;
      padding-left: 55px;
     }
   }
   .menuHead{
     padding-left: 10px;
     display: flex;
     align-items: center;
      padding-top: 10px;
     padding-bottom: 10px;
     color: white;
     background-color: #001529;
     .sidebarDiv{
       margin-left: 40px;
       width: 30px;
       height: 30px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 4px;
     }
   }
   .where{
     z-index: 10;
     line-height:60px;
     font-size: 13px;
     box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.25);
     >span{
       margin-left: 10px;
       b{
         margin-left: 10px;
       }
     }
   }
   @media screen and (max-width: 500px){
     .HideRight{
       margin-left:-40%;
     }
     .BackMainFather{
      width: 140%;
       .LeftNav{
         width: calc(40% / 1.4 );
         background-color: #001529;
       }
    }
     .BackMainFather .RightContent{
       width: calc(100% / 1.4 );
     }
     .LeftNav .menuLeft img{
       width: 15%;
     }
   }
.LeftNav{
  min-height: 100vh;
}
</style>